import React, { Component } from 'react'
import '../../styles/Login/register.scss';
import 'antd-mobile/dist/antd-mobile.css';
import { Button,Toast } from 'antd-mobile';
import { Link } from "react-router-dom";
import { getMobileCode, createUser } from "../../api/login";
import { testUser, testPass } from "../../utils/RegExp";

export default class Register extends Component {
  componentDidMount() {
    console.log(this.props)
  }
  onRegister = () => {//注册
    let _this = this;
    // 比较两次输入密码是否一致
    if ( this.pass2.value === this.pass1.value ) {
      if ( this.inpCheck.checked ) {
        async function sendLogin (data) {
          let res = await Promise.resolve(createUser(data))
          console.log(res)
          if ( res.status === 0 ) {
            _this.props.history.push('/')
            Toast.success(res.msg, 1)
          } else {
            Toast.fail(res.msg, 1)
          }
        }
        sendLogin({
          mobile: this.userNum.value,
          username: this.userNum.value,
          password: this.pass1.value,
          code: this.userCode.value
        })
      } else {
        Toast.info('请勾选协议', 1);
      }
    } else {
      Toast.info('密码两次输入不一致', 1);
    }
    this.mobileVerify()
  }

  sendCode = (e) => {//发送验证码
    // 计时器
    let count = 10;
    let timer = setInterval(() => {
      //将a标签pointer-events设置为none，a标签将无法点击触发事件
      count--;
      e.target.style.pointerEvents = 'none'
      e.target.innerHTML = count + '秒后可重发'
      if ( count <= 0 ) {
        clearInterval(timer)
        e.target.innerHTML = '重发验证码'
        //将a标签pointer-events重置为auto
        e.target.style.pointerEvents = 'auto'
      }
    }, 1000);
    async function getCode(data) {
      let res = await Promise.resolve(getMobileCode(data))
      console.log(res)
      Toast.info(res.msg, 1);
    }
    getCode(this.userNum.value)
    console.log(this.userNum.value)
  }

  mobileVerify = (e) => {// 手机号验证
    console.log(this.userNum.value)
    if (testUser(this.userNum.value)) {
      this.userNum.style.borderBottom = '0.01rem solid #C9C9C9 '
    } else {
      this.userNum.style.borderBottom = '0.01rem solid red'
      Toast.info('手机号码格式错误，请重新输入!!!', 1);
    }
  }

  passVerify = (e) => {// 密码验证
    if ( testPass(e.target.value) ) {
      e.target.style.borderBottom = '0.01rem solid #C9C9C9 '
    } else {
      e.target.style.borderBottom = '0.01rem solid red'
      Toast.info('密码必须位6-20数，至少包含数字跟字母，可以有字符', 1);
    }
  }
  
  render() {
    return (
      <div className="register-wrap">
        <div className="input-box">
          <input onBlur={this.mobileVerify} ref={c => this.userNum = c} placeholder="请输入注册手机号码" type="text"/>
          <input  placeholder="请输入短信验证码" ref={c => this.userCode = c} type="text"/>
          <a href="##" onClick={this.sendCode} ref={c => this.code =c}>发送验证码</a>
          <input ref={c => this.pass1 = c} onBlur={this.passVerify} placeholder="请设置6-20位登录密码" type="password"/>
          <input ref={c => this.pass2 = c} onBlur={this.passVerify} placeholder="请再次确认登录密码" type="password"/>
        </div>
        <div>
          <input ref={c => this.inpCheck = c}  type="checkbox"/>
          <span>&nbsp; &nbsp;同意《<a href="##">用户服务协议</a>》</span>
        </div>
        <Button type="primary" onClick={this.onRegister}>注册</Button>
        <div className="register-wrap">
          <Link to="/login">已有账号，直接登录</Link>
        </div>
      </div>
    )
  }
}
